<template>
    <!-- <el-table :data="formatData" :row-style="showRow" v-bind="$attrs"> -->
    <el-table ref="theTable"
              border
              :row-key="rowKey"
              style="width: 100%;margin-bottom: 20px;"
              :data="data"
              :default-expand-all="expandAll"
              :tree-props="{children: 'children' }">

        <el-table-column width="90" label="展开/折叠" align="center">
            <template slot-scope="scope">
                <!-- <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
                <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
                  <i v-if="!scope.row._expanded" class="el-icon-plus"/>
                  <i v-else class="el-icon-minus"/>
                </span> -->
            </template>
        </el-table-column>

        <!-- <el-table-column v-if="columns.length===0" width="150"   >
          <template slot-scope="scope">
            <span v-for="space in scope.row._level" :key="space" class="ms-tree-space"/>
            <span v-if="iconShow(0,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
              <i v-if="!scope.row._expanded" class="el-icon-plus"/>
              <i v-else class="el-icon-minus"/>
            </span>
            {{ scope.$index }}
          </template>
        </el-table-column> -->


        <el-table-column v-for="(column, index) in columns" :key="column.value" :label="column.text"
                         :width="column.width" :align="column.align ? column.align: 'center'">
            <template slot-scope="scope">
                <!-- Todo -->
                <!-- eslint-disable-next-line vue/no-confusing-v-for-v-if -->
                <span v-for="space in scope.row._level" v-if="index === 0" :key="space" class="ms-tree-space"/>
                <span v-if="iconShow(index,scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)"/>
                <!-- <i v-if="!scope.row._expanded" class="el-icon-plus"/>
                <i v-else class="el-icon-minus"/> -->

                <!-- 行内显示图片 -->
                <img v-if="column.imgFlag==true" :src="CMBASE.baseFileContext + scope.row[column.value]" width="60"
                     height="60" class="img"/>
                <!-- 行内显示图标 -->
                <i v-else-if="column.iconFlag==true" :class="scope.row[column.value]"></i>

                <!-- 行内格式自定义 -->
                <span v-else-if="column.formatter"> {{ column.formatter(scope.row) }}</span>

                <!-- 行内显示tag标签 -->
                <span v-else-if="column.tagFlag==true">
            <span v-for="item in column.tagFormatter" :key="item.value">
               <el-tag v-if="item.value==scope.row[column.value]" :type="item.type">{{ item.text }}</el-tag>
            </span>
        </span>

                <!-- 行内显示开关按钮 -->
                <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.value]" disabled
                           :active-value="1" :inactive-value="0"
                           @change="(value) => column.changeEvent(value,scope.row)">
                </el-switch>
                <!-- 行内显示下拉列 -->
                <el-select v-else-if="column.selectFlag==true" v-model="scope.row[column.value]">
                    <el-option v-for="item in column.dataSource" :key="item.value"
                               :label="item.text" :value="item.value">
                    </el-option>
                </el-select>
                <!-- 行内显示文本内容（默认） -->
                <span v-else>{{ scope.row[column.value] }}</span>


            </template>
        </el-table-column>
        <slot/>
    </el-table>
</template>

<script>
/**
 Auth: Lei.j1ang
 Created: 2018/1/19-13:59
 */
export default {
    name: 'TreeTable',
    props: {
        /* eslint-disable */
        data: {
            type: [Array, Object],
            required: true
        },
        columns: {
            type: Array,
            default: () => []
        },
        evalFunc: Function,
        evalArgs: Array,
        expandAll: {
            type: Boolean,
            default: false
        },
        rowKey: {
            type: String,
            default: "id"
        }
    },
    watch: {
        // expandAll(nval){
        //   console.log(nval)
        //    this.expandAll = nval ;
        //    this.$forceUpdate();
        //   // this.formatData.forEach(record => {
        //   //   record._expanded = !record._expanded;
        //   // });


        // }
    },
    computed: {
        // 格式化数据源
        // formatData: function() {
        //   let tmp
        //   if (!Array.isArray(this.data)) {
        //     tmp = [this.data]
        //   } else {
        //     tmp = this.data
        //   }
        //   const func = this.evalFunc || treeToArray
        //   const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
        //   return func.apply(null, args)
        // }
    },
    methods: {

        forArr(arr, isExpand) {
            arr.forEach(i => {
                this.$refs.theTable.toggleRowExpansion(i, isExpand)
                if (i.children) {
                    this.forArr(i.children, isExpand)
                }
            })
        },
        expandAllRow() { // 默认展开全部的话，首次加载需要在$nextTick下进行
            this.forArr(this.data, true)
        },
        collapseAllRow() {
            this.forArr(this.data, false)
        },

        // 图标显示
        iconShow(index, record) {
            return (index === 0 && record.children && record.children.length > 0)
        }
    }
}
</script>
<style rel="stylesheet/css">
@keyframes treeTableShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@-webkit-keyframes treeTableShow {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
</style>

<style lang="scss" rel="stylesheet/scss" scoped>
$color-blue: #2196F3;
$space-width: 18px;
.ms-tree-space {
    position: relative;
    top: 1px;
    display: inline-block;
    font-style: normal;
    font-weight: 400;
    line-height: 1;
    width: $space-width;
    height: 14px;

    &::before {
        content: ""
    }
}

.processContainer {
    width: 100%;
    height: 100%;
}

table td {
    line-height: 26px;
}

.tree-ctrl {
    position: relative;
    cursor: pointer;
    color: $color-blue;
    margin-left: -$space-width;
}
</style>
